<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>房购中心列表</title>
</head>
<link rel="icon" href="${ctx}/images/favicon.ico" type="image/x-icon" />
<script type="text/javascript"
	src="${ctx}/common/script/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${ctx}/js/gritter.js"></script>
<script type="text/javascript"
	src="${ctx}/common/script/lib/template.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/css/bootstrap.css">
<link href="${ctx}/css/style.css" rel="stylesheet" />
<body>
<p id="pingList"
	style="width: 100%; height: 100%; background-color: #614848; z-index: 99; opacity: 0.4; position:fixed; display:none;"/>
	<div id="head-nav" class="navbar navbar-default navbar-fixed-top"
		style="background-color: #8c1717;">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".navbar-collapse">
					<span class="fa fa-gear"></span>
				</button>
				<a class="navbar-brand" href="#"><span>房购系统</span></a>
			</div>
			<div class="navbar-collapse collapse">
			<div style="width: 100px; height: 50px;position: absolute;" onclick="JavaScript:window.location.href = '${ctx}/index'"></div>
				<a style="font-size: 23px; color: white; margin-left: 33%; ">选择房源</a>
				<ul class="nav navbar-nav navbar-right user-nav">
					<li class="dropdown profile_menu">
						<div class="h_r" style="margin-top: 10px">
							<div class="set" style="text-align: right">
								<div class="set_c">
									<span class="hy">欢迎您！<label id="laber_name"></label></span> <a
										href="Javascript:closeList()" class="set_a"
										style="color: #fff; margin-left: 5px">退出</a>
								</div>
								
							</div>
							<div class="date">
								<span id="Y">2017年</span> <span id="MH">10月</span> <span id="TD">22日</span>
								<span id="D">星期六</span> <span id="H">21</span> <span>:</span> <span
									id="M">59</span> <span>:</span> <span id="S">19</span>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<!--/.nav-collapse animate-collapse -->
		</div>
	</div>
	<div id="cl-wrapper" class="fixed-menu">
		<div class="tableTitle">
			<table id="tableTitle"
				style="width: 100%; text-align: center; background-color: #6d0e17; color: white;">
				<tr style="border-style: none; height: 40px;">
					<#list buildings as item>
					<td><a href="#"
						style="color: #fff; font-size: 14px; font-weight: lighter;"><label>${item.buildings!}</label>号楼</a></td>
					</#list>
				</tr>
			</table>
		</div>
		<div class="housetable"
			style="width: 100%; height: 760px; text-align: center;">
			<table cellspacing="1" cellpadding="0" border="0" class="houseInfo">
				<thead>
					<tr class="unit">
					</tr>
					<tr class="house_title">
						<!-- <td colspan="3" width="16%">01(西边户)</td>
						<td colspan="3" width="16%">02</td>
						<td colspan="3" width="16%">03</td>
						<td colspan="3" width="16%">04</td>
						<td colspan="3" width="16%">05</td>
						<td colspan="3" width="16%">06(东边户)</td> -->
					</tr>
					<tr id="house">
					</tr>
				</thead>
				<tbody class="houseData">
				</tbody>
			</table>
		</div>
		<div class="infoTitle"
			style="background-color: white; width: 50%; height: 330px; position: fixed; top: 20%; left: 25%; display: none; z-index:999">
			<div
				style="text-align: center; height: 55px; color: white; background-color: #823535;">
				<br>
				<p style="font-size: 22px; font-weight: bolder;">确认认购</p>
				<div style="float: right; margin-top: -47px;">
					<img src="${ctx}/images/cha.png" width="30px;" height="30px;"
						onclick="Javascript:cha_info()">
				</div>
			</div>
			<div style="height: 240px;">
				<div style="text-align: center; font-size: 16px;">
					<i>距离自动解锁还剩: <i style="color: red;" class="time"></i> 秒
					</i>
				</div>
				<div style="height: 40px; text-align: center; margin-top: 10px;">
					<input type="hidden" id="room_id">
					<table border="1" class="info">
						<tr>
							<td>姓名</td>
							<td style="color: red;"><label id="userName"></label></td>
							<td>选择序号</td>
							<td style="color: red;" id="room_no"></td>
						</tr>
						<tr>
							<td>身份证号</td>
							<td style="color: red;"><label id="idCard"></label></td>
							<td>面积</td>
							<td style="color: red;" id="acreage"></td>
						</tr>
						<tr>
							<td>手机号</td>
							<td style="color: red;"><label id="userPhone"></label></td>
							<td>单价</td>
							<td style="color: red;" id="price"></td>

						</tr>
						<tr>
							<td>置业顾问</td>
							<td style="color: red;" id="adviser"></td>
							<td>总价</td>
							<td style="color: red;" id="total_price"></td>
						</tr>
					</table>
				</div>
			</div>
			<div style="text-align: center; color: white;"
				class="infoOk">
				<input type="submit" value="确定" onclick="Javascript:houseBuy()" />
				<input type="reset" value="取消" onclick="Javascript:cha_info()" />
			</div>
		</div>

		<div class="kuang"
			style="background-color: white; position: absolute; top: 30%; left: 45%; position: fixed; width: 200px; height: 200px; text-align: center; display: none; z-index:999">
			<div style="margin-top: 20px;">
				<img src="${ctx}/images/ok.png" width=100px; " height="100px;">
				<h2 style="color: green; margin-left: 20px;">操作成功！</h2>
				<input type="button" value="确定" onclick="Javascript:cha_kuang()">
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">		
function isLogin() {
	$.getJSON("${ctx}/user/info", {
		token : localStorage.getItem("token")
	}, function(json) {
		if (json.success) {
			$("#laber_name").text(json.success.nick_name);
			$("#userName").text(json.success.nick_name);
			$("#userPhone").text(json.success.phone);
			$("#idCard").text(json.success.id_card);
			localStorage.setItem("token", json.success.guid);
		} else {
			closeList();
		}
	});
}
$(function() {
	isLogin();
	get_list();
	$(".tableTitle>table>tbody>tr>td").click(function() {
		$(".tableTitle>table>tbody>tr>td").removeClass("addLi");
		$(this).addClass("addLi");
		$("#house").empty();
		$(".unit").empty();
		$(".houseData").empty();
		$(".house_title").empty();
		get_list();
	});
	$('.tableTitle>table>tbody>tr').each(function() {
		$(this).children(':first').addClass('addLi')
	});
});
$(document).ready(function() {
	$.getJSON("${ctx}/list/delete/trade", {token : localStorage.getItem("token")});
	showTime();
	setInterval(showTime, 1000);
	function showTime() {
		var today = new Date();
		var weekday = new Array(7)
		weekday[0] = "星期日"
		weekday[1] = "星期一"
		weekday[2] = "星期二"
		weekday[3] = "星期三"
		weekday[4] = "星期四"
		weekday[5] = "星期五"
		weekday[6] = "星期六"
		var y = today.getFullYear() + "年";
		var month = (today.getMonth() + 1) + "月";
		var td = today.getDate() + "日";
		var d = weekday[today.getDay()];
		var h = today.getHours();
		var m = today.getMinutes();
		var s = today.getSeconds();
		$('#Y').html(y);
		$('#MH').html(month);
		$('#TD').html(td);
		$('#H').html(h);
		$('#M').html(m);
		$('#S').html(s);
		$('#Y').html(y);
	}
});
function closeList() {
	localStorage.removeItem("token");
	window.location.href = "${ctx}/index";
}
function get_list() {
	var buildings = 1;
	var tdList = $("#tableTitle>tbody>tr>td");
	for (var i = 0; i < tdList.length; i++) {
		var td = tdList.eq(i).find("label").html();
		if (tdList.eq(i).hasClass("addLi")) {
			buildings = td;
		}
	}
	$.getJSON("${ctx}/list/house", {
		token : localStorage.getItem("token"),
		buildings : buildings
	}, function(data) {
		if (data) {
			var count =0;
			for (var i = 0; i < data.length; i++) {
				var item = data[i];
				if(parseInt(count) < data[i].length){
					count = data[i].length;
				}
				$("#house").append("<td>房号</td><td>面积(㎡)</td><td>价格</td>");
				if(i==0){
					$(".unit").append("<td colspan='3'>"+ item[0].unit+ "单元(西)</td>");
					$(".house_title").append("<td colspan='3' width='16%'>"+ 0+item[0].unit+"(西边户)</td>");
				}else if(i==data.length-1){
					$(".unit").append("<td colspan='3'>"+ item[0].unit+ "单元(东)</td>");
					$(".house_title").append("<td colspan='3' width='16%'>"+ 0+item[0].unit+"(东边户)</td>");
				}else{
					$(".unit").append("<td colspan='3'>"+ item[0].unit+ "单元</td>");
					$(".house_title").append("<td colspan='3' width='16%'>"+ 0+item[0].unit+"</td>");
				}
			}
			for (var i = 0; i < count; i++) {
				var content = '';
				for (var j = 0; j < data.length; j++) {
					var item = data[j];
					if(item.length>i){
						var str = '';
						if(item[i].status==0){
							str ="<td style='background-color: red; color: white;' onclick='javascript:info(this)'>"+
							"<input id='val_no' type='hidden' value='"+item[i].buildings+"-"+item[i].unit+"-"+item[i].room_no+"'>"+
							"<input id='val_id' type='hidden' value='"+item[i].id+"'>"+
							"<input id='val_acreage' type='hidden' value='"+item[i].acreage+"'>"+
							"<input id='val_price' type='hidden' value='"+item[i].price+"'>"+
							"<input id='val_total_price' type='hidden' value='"+item[i].total_price+"'>"+
							"<input id='val_adviser' type='hidden' value='"+item[i].adviser+"'>"+
							"<a href='#' style='border: 1px; color: white; cursor: pointer;'>"+item[i].room_no+"</br>可购买</a>";
						}else if(item[i].status==1){
							str = "<td style='background-color: green; color: white;'>"+
							"<a style='border: 1px; color: white; cursor: pointer;'>"+item[i].room_no+"</br>被认购</a></td>"
						}else if(item[i].status==2){
							str = "<td style='background-color: #5267f1; color: white;'>"+
							"<a style='border: 1px; color: white; cursor: pointer;'>"+item[i].room_no+"</br>认购中</a></td>"
						}
						content += str+"<td>"+item[i].acreage+"</td>"+"<td><li>单价："+item[i].price+"</li>"+"</li>"+"<li>总价："+item[i].total_price+"</li></td>"
					}else{
						content+="<td></td><td></td><td></td>"
					}
				}
				$(".houseData").append("<tr>"+content+"</tr>");
			}
		}
	});
}
	function info(dom) {
		$("#pingList").css("display", "block");
		var id = $(dom).children('#val_id').val();
		$.getJSON("${ctx}/list/trade", {
			token : localStorage.getItem("token"),
			status : 2,
			id : id
		}, function(json) {
			if(json.success){
				$("#room_id").val(id);
				$("#room_no").text($(dom).children('#val_no').val());
				$("#acreage").text($(dom).children('#val_acreage').val());
				$("#adviser").text($(dom).children('#val_adviser').val());
				$("#price").text($(dom).children('#val_price').val());
				$("#total_price").text($(dom).children('#val_total_price').val());
				$(".infoTitle").css("display", "block");
				countdown = 30;
				settime();
			}else{
				$("#house").empty();
				$(".house_title").empty();
				$(".unit").empty();
				$(".houseData").empty();
				get_list();
				$("#pingList").css("display", "none");
				alert(json.error)
			}
		});
	}
	function cha_kuang() {
		$(".infoTitle").css("display", "none");
		$(".kuang").css("display", "none");
		$("#house").empty();
		$(".unit").empty();
		$(".houseData").empty();
		$(".house_title").empty();
		$("#pingList").css("display", "none");
		get_list();
	}
	function houseBuy() {
		var id = $("#room_id").val();
		$.getJSON("${ctx}/list/trade", {
			token : localStorage.getItem("token"),
			status : 1,
			id : id
		}, function(json) {
			if (json.success) {
				$(".kuang").css("display", "block");
			} else {
				$("#house").empty();
				$(".unit").empty();
				$(".houseData").empty();
				$(".house_title").empty();
				get_list();
				alert(json.error)
			}
		});
	}
	var countdown = 30;
	var intervalID;
	function settime() {
		$(".time").html(countdown)
		countdown--;
		intervalID = setTimeout(function() {
			if (countdown == 0) {
				cha_info();
			} else {
				settime();
			}

		}, 1000)
	}
	function cha_info() {
		$("#pingList").css("display", "none");
		clearTimeout(intervalID)
		$(".infoTitle").css("display", "none");
		var id = $("#room_id").val();
		$.getJSON("${ctx}/list/trade", {
			token : localStorage.getItem("token"),
			status : 0,
			id : id
		}, function(json) {
			$("#house").empty();
			$(".unit").empty();
			$(".houseData").empty();
			$(".house_title").empty();
			get_list();
		});
	}
</script>
</html>